<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息管理</title>
    <!-- <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> -->
    <!-- <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet"> -->
    <!-- <script src="./js/bootstrap.min.js"></script> -->
    <!-- <script src="./js/jquery1.11.js"></script> -->
    <script src="./js/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            text-decoration: none;
        }
        
        .wrap {
            width: 900px;
            height: 100%;
            /* border: 1px solid skyblue; */
            border-radius: 4px;
            margin: 6px;
        }
        
        .wrap h3 {
            width: 900px;
            height: 50px;
            background-color: rgb(179, 228, 247);
            margin-top: 0;
            line-height: 50px;
            color: rgb(10, 76, 104);
        }
        
        .main {
            width: 890px;
            height: 100%;
            border-radius: 4px;
            margin: 5px;
        }
        
        .add {
            width: 40px;
            height: 30px;
            background-color: rgb(14, 167, 14);
            line-height: 30px;
            text-align: center;
            margin: 3px;
            border-radius: 3px;
        }
        
        .add a {
            color: #fff;
        }
        
        .content {
            width: 890px;
            height: 100%;
            border: 1px solid #999;
            border-top: 0;
            box-sizing: border-box;
        }
        
        .header {
            width: 890px;
            height: 40px;
            line-height: 1;
            display: flex;
            justify-content: space-between;
            border-top: 1px solid #999;
            border-bottom: 0;
        }
        
        .header span {
            display: block;
            float: left;
            width: 127px;
            height: 100%;
            border-left: 1px solid #333;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
        }
        
        .body {
            width: 890px;
            height: 100%;
        }
        
        .body p {
            width: 890px;
            height: 100%;
            border-radius: 1px solid #999;
        }
        
        .body p span {
            display: block;
            float: left;
            width: 127px;
            height: 40px;
            border-left: 1px solid #333;
            border-bottom: 1px solid #999;
            line-height: 40px;
            text-align: center;
            box-sizing: border-box;
        }
        
        .body p span:nth-child(7) {
            border-right: 1px solid #999;
        }
        
        .body p span button {
            width: 40px;
            height: 28px;
            line-height: 28px;
            background-color: red;
            color: #fff;
            border: 0;
            border-radius: 2px;
        }
    </style>
</head>

<body>
    列表页
    <div class="wrap">
        <h3>学生信息管理</h3>
        <div class="main">
            <div class="add">
                <a href="./add.html">新增</a>
            </div>
            <div class="content">
                <div class="header">
                    <span>序号</span><span>姓名</span><span>手机号</span><span>QQ号</span><span>专业</span><span>毕业时间</span><span>操作</span>
                </div>
                <div class="body">
                    <!-- <p>
                        <span class="data1">1</span>
                        <span class="data2">2</span>
                        <span class="data3">3</span>
                        <span class="data4">4</span>
                        <span class="data5">5</span>
                        <span class="data6">6</span>
                        <span class="data7">
                            <a href="./updata.html">修改</a>
                            <button>删除</button>
                        </span>
                    </p> -->
                </div>
            </div>
        </div>
    </div>

    <script>
        let num = document.querySelector('.data1');
        let name = document.querySelector('.data2');
        let phome = document.querySelector('.data3');
        let qq = document.querySelector('.data4');
        let major = document.querySelector('.data5');
        let time = document.querySelector('.data6');
        let operate = document.querySelector('.data7');
        // 发起请求  查找所有
        axios({
            method: "get",
            url: "http://localhost:3000/data",
        }).then((data) => {
            // 所有
            let v = data.data;
            console.log(v);
            for (let i = 0; i < v.length; i++) {
                let arr = `
                    <p>
                        <span class="data1">${v[i].id}</span>
                        <span class="data2">${v[i].name}</span>
                        <span class="data3">${v[i].phome}</span>
                        <span class="data4">${v[i].qq}</span>
                        <span class="data5">${v[i].major}</span>
                        <span class="data6">${v[i].time}</span>
                        <span class="data7">
                            <a href="./updata.html?pid=${v[i].id}">修改</a>
                            <button data-id='${v[i].id}'>删除</button>
                        </span>
                    </p>
                `;
                // 渲染
                document.querySelector('.body').innerHTML += arr;
            }
            // 获取删除按钮
            let btn = document.querySelectorAll('button');
            // 遍历删除
            btn.forEach(v => {
                v.onclick = function() {
                    // pid
                    let pid = this.getAttribute('data-id');
                    console.log(pid);
                    // 删除
                    axios({
                        method: 'delete',
                        url: `http://localhost:3000/data/${pid}` //直接写ID即可
                    }).then((data) => {
                        this.parentNode.parentNode.remove();
                        alert('删除成功')
                    })
                }
            })
        })
    </script>
</body>

</html>